<style>
    /** 统计快捷方式样式 */
    .console-link-block {
        font-size: 16px;
        padding: 20px 20px;
        border-radius: 4px;
        background-color: #40D4B0;
        color: #FFFFFF !important;
        box-shadow: 0 2px 3px rgba(0, 0, 0, .05);
        position: relative;
        overflow: hidden;
        display: block;
    }

    .console-link-block .console-link-block-num {
        font-size: 40px;
        margin-bottom: 5px;
        opacity: .9;
    }

    .console-link-block .console-link-block-text {
        opacity: .8;
    }

    .console-link-block .console-link-block-icon {
        position: absolute;
        top: 35%;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 50px;
        line-height: 50px;
        margin-top: -25px;
        color: #FFFFFF;
        opacity: .8;
    }

    .console-link-block .console-link-block-band {
        color: #fff;
        width: 100px;
        font-size: 12px;
        padding: 2px 0 3px 0;
        background-color: #E32A16;
        line-height: inherit;
        text-align: center;
        position: absolute;
        top: 8px;
        right: -30px;
        transform-origin: center;
        transform: rotate(45deg) scale(.8);
        opacity: .95;
        z-index: 2;
    }

    /** //统计快捷方式样式 */

    /** 设置每个快捷块的颜色 */
    .layui-row > div:nth-child(2) .console-link-block {
        background-color: #55A5EA;
    }

    .layui-row > div:nth-child(3) .console-link-block {
        background-color: #9DAFFF;
    }

    .layui-row > div:nth-child(4) .console-link-block {
        background-color: #F591A2;
    }

    .layui-row > div:nth-child(5) .console-link-block {
        background-color: #FEAA4F;
    }

    .layui-row > div:last-child .console-link-block {
        background-color: #9BC539;
    }
</style>
<div class="layui-card">
    <div class="layui-card-header">
        <include src="pages/common/breadcrumb.html"/>
    </div>

    <div class="layui-card-body">
        <div class="layui-fluid ew-console-wrapper">
            <!-- 快捷方式 -->
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
                    <div class="console-link-block">
                        <div class="console-link-block-num">15</div>
                        <div class="console-link-block-text">本周用户量</div>
                        <i class="console-link-block-icon layui-icon layui-icon-user"></i>
                    </div>
                </div>
                <div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
                    <div class="console-link-block">
                        <div class="console-link-block-num">13</div>
                        <div class="console-link-block-text">本月用户量</div>
                        <i class="console-link-block-icon layui-icon layui-icon-user"></i>
                    </div>
                </div>
                <div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
                    <div class="console-link-block">
                        <div class="console-link-block-num">22</div>
                        <div class="console-link-block-text">本周会话量</div>
                        <i class="console-link-block-icon layui-icon layui-icon-list"
                           style="font-size: 62px;padding-right: 5px;"></i>
                    </div>
                </div>
                <div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
                    <div class="console-link-block">
                        <div class="console-link-block-num">18</div>
                        <div class="console-link-block-text">本月会话量</div>
                        <i class="console-link-block-icon layui-icon layui-icon-date"></i>
                    </div>
                </div>
                <div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
                    <div class="console-link-block">
                        <div class="console-link-block-num">11</div>
                        <div class="console-link-block-text">客服数量</div>
                        <i class="console-link-block-icon layui-icon layui-icon-service"></i>
                    </div>
                </div>
                <div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
                    <div class="console-link-block">
                        <div class="console-link-block-num">5</div>
                        <div class="console-link-block-text">在线客服数量</div>
                        <i class="console-link-block-icon layui-icon layui-icon-service"></i>
                    </div>
                </div>
            </div>
            <!-- 统计图表 -->
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md4 layui-col-sm6">
                    <div class="layui-card" style="overflow: hidden;">
                        <div class="layui-card-header">日统计</div>
                        <div class="layui-card-body">
                            <div id="consoleChartsDay" style="height: 300px; -webkit-tap-highlight-color: transparent;
                    user-select: none; position: relative;">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4 layui-col-sm6">
                    <div class="layui-card" style="overflow: hidden;">
                        <div class="layui-card-header">周统计</div>
                        <div class="layui-card-body">
                            <div id="consoleChartsWeek"
                                 style="height: 300px; -webkit-tap-highlight-color: transparent; user-select: none;    position: relative;">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4 layui-col-sm6">
                    <div class="layui-card" style="overflow: hidden;">
                        <div class="layui-card-header">月统计</div>
                        <div class="layui-card-body">
                            <div id="consoleChartsMonth" style="height: 300px; -webkit-tap-highlight-color: transparent; user-select: none;
                    position: relative;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script>
    layui.use(['echarts','tools'], function () {
        var $ = layui.jquery;
        var tools= layui.tools;
        var echarts = layui.echarts;
        tools.includeHtml(function () {
            $(this).vm({"headerTitle": ""});
        });

        /** 渲染日统计图表 */
        var myCharts1 = echarts.init(document.getElementById('consoleChartsDay'));
        var options1 = {
            title: {
                text: '今日用户量/今日会话量', x: 'center', y: '32%',
                textStyle: {fontSize: 18, color: '#262626', fontWeight: 'normal'},
                subtextStyle: {fontSize: 56, color: '#10B4E8'}, itemGap: 20
            },
            color: ['#10B4E8', '#E0E0E0'],
            tooltip: {trigger: 'item'},
            legend: {
                orient: 'vertical', right: '0px', top: '0px',
                data: ['用户量', '会话量'], textStyle: {color: '#595959'}
            },
            series: [{name: '数量', type: 'pie', radius: ['75%', '80%'], label: {normal: {show: false}}}]
        };
        myCharts1.setOption(options1);
        // 赋值
        myCharts1.setOption({
            title: {subtext: '38/60'}, series: [{data: [{name: '用户量', value: 38}, {name: '会话量', value: 22}]}]
        });

        /** 渲染周统计图表 */
        var myCharts2 = echarts.init(document.getElementById('consoleChartsWeek'));
        var options2 = {
            tooltip: {trigger: 'axis', axisPointer: {lineStyle: {color: '#E0E0E0'}}},
            color: ['#10B4E8', '#FFA800'],
            legend: {
                orient: 'vertical', right: '0px', top: '0px',
                data: ['用户量', '会话量'], textStyle: {color: '#595959'}
            },
            grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'},
            xAxis: {
                name: '星期',
                nameTextStyle: {color: '#595959'},
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五'],
                axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
                axisLabel: {color: '#8c8c8c'},
                axisTick: {alignWithLabel: true}
            },
            yAxis: {
                name: '数量',
                nameTextStyle: {color: '#595959'},
                type: 'value',
                boundaryGap: ['0', '20%'],
                axisTick: {show: false},
                axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
                axisLabel: {color: '#8c8c8c'},
                splitLine: {show: false},
                splitArea: {show: false},
                minInterval: 1
            },
            series: [{
                name: '用户量', type: 'bar', stack: 'one', barMaxWidth: '30px',
                label: {normal: {show: true, position: 'inside'}}
            }, {
                name: '会话量', type: 'bar', stack: 'one', barMaxWidth: '30px',
                label: {normal: {show: true, position: 'inside'}}
            }]
        };
        myCharts2.setOption(options2);
        // 赋值
        myCharts2.setOption({series: [{data: [5, 9, 6, 3, 10]}, {data: [10, 6, 9, 12, 5]}]});

        /** 渲染月统计图表 */
        var myCharts3 = echarts.init(document.getElementById('consoleChartsMonth'));
        var options3 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {lineStyle: {color: '#E0E0E0'}},
                formatter: '{b}号<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#10B4E8;"></span>{a0}: {c0}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#FFA800;"></span>{a1}: {c1}'
            },
            color: ['#10B4E8', '#FFA800'],
            legend: {
                orient: 'vertical', right: '0px', top: '0px',
                data: ['用户量', '会话量'], textStyle: {color: '#595959'}
            },
            grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'},
            xAxis: {
                name: '日期',
                nameTextStyle: {color: '#595959'},
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
                axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
                axisLabel: {
                    color: '#8c8c8c', interval: function (index, value) {
                        return index === 0 || ((index + 1) % 5 === 0);
                    }
                },
                axisTick: {alignWithLabel: true}
            },
            yAxis: {
                name: '数量',
                nameTextStyle: {color: '#595959'},
                type: 'value',
                boundaryGap: ['0', '20%'],
                axisTick: {show: false},
                axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
                axisLabel: {color: '#8c8c8c'},
                splitLine: {show: false},
                splitArea: {show: false},
                minInterval: 1
            },
            series: [
                {name: '用户量', type: 'line', smooth: false},
                {name: '会话量', type: 'line', smooth: false}
            ]
        };
        myCharts3.setOption(options3);
        // 赋值
        myCharts3.setOption({
            series: [
                {data: [15, 14, 13, 13, 13, 14, 15, 16, 17, 18, 19, 18, 18, 19, 20, 19, 18, 16, 14, 12, 10, 10, 12, 14, 16, 16, 14, 13, 12, 11, 10]},
                {data: [24, 22, 20, 18, 16, 14, 13, 12, 11, 11, 10, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 23, 24, 25, 26, 26, 24, 22, 20, 18, 16]}
            ]
        });

        /** 窗口大小改变事件 */
        function resizeCharts() {
            myCharts1.resize();
            myCharts2.resize();
            myCharts3.resize();
        }

        window.onresize = function () {
            setTimeout(function () {
                resizeCharts();
            }, 360);
        };
    });
</script>